<template>
    <div id="guesslike">
        <div class="guesstitle">
            <h2>猜你喜欢</h2>
        </div>
        <ul class="guess-info">
            <li class="guessinfomsg" v-for="(item,index) in guesslike" :key="index">
                <div class="guess-like-info">
                    <img :src="item.img" alt="">
                    <h3>{{item.title}}</h3>
                    <p class="guess-price"><span>{{item.price}}</span>元起</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name:"guesslike",
    data(){
        return {
            guesslike:[
                {
                    img:require("@/assets/details/guess1.png"),
                    title:"[定制游]全国出发泰国曼谷+芭提雅定制6日游（小众独特+两人成行专车专导+大皇宫虔诚参拜+畅游暹罗海洋世界水族馆+东巴乐园风情体验+曼谷文化艺术中心感+可升级酒店+赠送泰国当地电话卡",
                    price:2740
                },
                {
                    img:require("@/assets/details/guess2.jpg"),
                    title:"[定制游]全国出发清迈5-10天定制自由行（如你一般的清新古城+实地考察清迈美女客服+从此出行不迷茫）",
                    price:4999
                },
                {
                    img:require("@/assets/details/guess1.png"),
                    title:"[定制游]全国出发泰国曼谷+芭提雅定制6日游（小众独特+两人成行专车专导+大皇宫虔诚参拜+畅游暹罗海洋世界水族馆+东巴乐园风情体验+曼谷文化艺术中心感+可升级酒店+赠送泰国当地电话卡",
                    price:2740
                },
                {
                    img:require("@/assets/details/guess2.jpg"),
                    title:"[定制游]全国出发清迈5-10天定制自由行（如你一般的清新古城+实地考察清迈美女客服+从此出行不迷茫）",
                    price:4999
                },
                {
                    img:require("@/assets/details/guess1.png"),
                    title:"[定制游]全国出发泰国曼谷+芭提雅定制6日游（小众独特+两人成行专车专导+大皇宫虔诚参拜+畅游暹罗海洋世界水族馆+东巴乐园风情体验+曼谷文化艺术中心感+可升级酒店+赠送泰国当地电话卡",
                    price:2740
                },
                {
                    img:require("@/assets/details/guess2.jpg"),
                    title:"[定制游]全国出发清迈5-10天定制自由行（如你一般的清新古城+实地考察清迈美女客服+从此出行不迷茫）",
                    price:4999
                },
                {
                    img:require("@/assets/details/guess1.png"),
                    title:"[定制游]全国出发泰国曼谷+芭提雅定制6日游（小众独特+两人成行专车专导+大皇宫虔诚参拜+畅游暹罗海洋世界水族馆+东巴乐园风情体验+曼谷文化艺术中心感+可升级酒店+赠送泰国当地电话卡",
                    price:2740
                },
                {
                    img:require("@/assets/details/guess2.jpg"),
                    title:"[定制游]全国出发清迈5-10天定制自由行（如你一般的清新古城+实地考察清迈美女客服+从此出行不迷茫）",
                    price:4999
                },
                {
                    img:require("@/assets/details/guess1.png"),
                    title:"[定制游]全国出发泰国曼谷+芭提雅定制6日游（小众独特+两人成行专车专导+大皇宫虔诚参拜+畅游暹罗海洋世界水族馆+东巴乐园风情体验+曼谷文化艺术中心感+可升级酒店+赠送泰国当地电话卡",
                    price:2740
                },
                {
                    img:require("@/assets/details/guess2.jpg"),
                    title:"[定制游]全国出发清迈5-10天定制自由行（如你一般的清新古城+实地考察清迈美女客服+从此出行不迷茫）",
                    price:4999
                },
                {
                    img:require("@/assets/details/guess1.png"),
                    title:"[定制游]全国出发泰国曼谷+芭提雅定制6日游（小众独特+两人成行专车专导+大皇宫虔诚参拜+畅游暹罗海洋世界水族馆+东巴乐园风情体验+曼谷文化艺术中心感+可升级酒店+赠送泰国当地电话卡",
                    price:2740
                },
                {
                    img:require("@/assets/details/guess2.jpg"),
                    title:"[定制游]全国出发清迈5-10天定制自由行（如你一般的清新古城+实地考察清迈美女客服+从此出行不迷茫）",
                    price:4999
                },
                {
                    img:require("@/assets/details/guess1.png"),
                    title:"[定制游]全国出发泰国曼谷+芭提雅定制6日游（小众独特+两人成行专车专导+大皇宫虔诚参拜+畅游暹罗海洋世界水族馆+东巴乐园风情体验+曼谷文化艺术中心感+可升级酒店+赠送泰国当地电话卡",
                    price:2740
                },
                {
                    img:require("@/assets/details/guess2.jpg"),
                    title:"[定制游]全国出发清迈5-10天定制自由行（如你一般的清新古城+实地考察清迈美女客服+从此出行不迷茫）",
                    price:4999
                }
            ]
        }
    }
}
</script>
<style lang="less" scoped>
    #guesslike{
        // padding: 14px;
        background-color: white;
        .guesstitle{
            text-align: center;
            padding: 14px;
            h2{
                margin:0;
                padding-bottom: 14px;
            }
        }
        .guess-info{
            margin:0;
            padding:0;
            list-style: none;
            overflow: hidden;
            .guessinfomsg{
                width: 50%;
                // border: 1px solid red;
                float: left;
                .guess-like-info{
                    width: 94%;
                    margin:auto;
                    img{
                        width: 100%;
                    }
                    h3{
                        color: rgba(0, 0, 0, 0.8);
                        font-size: 1.1em;
                        font-weight: normal;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        margin:10x 0;
                    }
                    .guess-price{
                        margin:10px 0 0 0;
                        padding-bottom: 10px;
                        color:rgba(0, 0, 0, 0.6);
                        span{
                            color:#ff7467;
                            display: inline-block;
                            margin-right: 0.2em;
                        }
                    }
                }
            }
        }
    }
</style>
